VUE 的一些常用外部組件學(xué)習(xí)日志
發(fā)布時(shí)間：2024/9/5 15:52:50
echarts 采用畫圖
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來(lái)非常簡(jiǎn)單，本教程基于 Vue 2.1.8 版本測(cè)試，Vue3 請(qǐng)參閱 Vue3 教程。
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<h1>菜鳥教程</h1>
<p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p>
<p>哈哈哈，打字辛苦啊。。</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
GoJS 圖形實(shí)例
GoJS是一個(gè)用于創(chuàng)建交互式可視化圖表和圖形的JavaScript庫(kù)。它提供了豐富的功能和工具，使開發(fā)人員能夠輕松地構(gòu)建各種類型的圖表，包括流程圖、組織結(jié)構(gòu)圖、網(wǎng)絡(luò)拓?fù)鋱D等。GoJS具有靈活的布局和樣式設(shè)置，可以通過(guò)簡(jiǎn)單的API來(lái)實(shí)現(xiàn)圖表的創(chuàng)建和操作。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。
vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑
router.map({
'/home': { component: Home },
'/about': { component: About }
})
SweetAlert2是一款功能強(qiáng)大的純Js模態(tài)消息對(duì)話框插件。SweetAlert2用于替代瀏覽器默認(rèn)的彈出對(duì)話框，它提供各種參數(shù)和方法，支持嵌入圖片，背景，HTML標(biāo)簽等，SweetAlert2是SweetAlert-js的升級(jí)版本，它解決了SweetAlert-js中不能嵌入HTML標(biāo)簽的問(wèn)題，并對(duì)彈出對(duì)話框進(jìn)行了優(yōu)化，同時(shí)提供對(duì)各種表單元素的支持，還增加了5種情景模式的模態(tài)對(duì)話框，功能非常強(qiáng)大
Swal('hello world')
swal({
title: '提示',
text: "早上好",
confirmButtonText: '確認(rèn)',
confirmButtonColor: 'Green',
})
swal({
title: '確定?',
text: '您將無(wú)法恢復(fù)此文件!',
type: '警告',
showCancelButton: true,
confirmButtonText: '確定,刪除',
cancelButtonText: '取消',
}).then(function(isConfirm) {
if (isConfirm.value) {
swal(
'已刪除!',
'文件已刪除',
'success'
);
}
});
致勝網(wǎng)絡(luò)
13592986386
